<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发现活动 - 心动社交</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        /* 基础样式 */
        body {
            font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
            background-color: #f8fafc;
            color: #334155;
            line-height: 1.6;
        }
        
        /* 导航栏样式 */
        .navbar {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            padding: 0.75rem 0;
        }
        
        .logo {
            font-weight: 700;
            font-size: 1.5rem;
            color: #3b82f6;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .nav-link {
            color: #64748b;
            font-weight: 500;
            transition: color 0.2s;
            padding: 0.5rem 1rem !important;
        }
        
        .nav-link:hover, .nav-link.active {
            color: #3b82f6;
        }
        
        .search-bar {
            max-width: 400px;
            width: 100%;
            position: relative;
        }
        
        .search-bar input {
            padding-left: 2.5rem;
            background-color: #f1f5f9;
            border: none;
            transition: all 0.3s;
        }
        
        .search-bar input:focus {
            background-color: white;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        
        .search-bar i {
            position: absolute;
            left: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            color: #94a3b8;
        }
        
        /* 主内容区 */
        .main-container {
            padding: 2rem 0;
        }
        
        /* 页面标题 */
        .page-header {
            margin-bottom: 2rem;
        }
        
        .page-title {
            font-weight: 700;
            font-size: 1.8rem;
            color: #1e293b;
            margin-bottom: 0.5rem;
        }
        
        .page-description {
            color: #64748b;
        }
        
        /* 分类筛选 */
        .categories {
            display: flex;
            gap: 0.75rem;
            overflow-x: auto;
            padding-bottom: 0.5rem;
            margin-bottom: 2rem;
        }
        
        .category-item {
            padding: 0.5rem 1.25rem;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 500;
            white-space: nowrap;
            cursor: pointer;
            transition: all 0.3s;
            background-color: white;
            color: #64748b;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        
        .category-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        }
        
        .category-item.active {
            background-color: #3b82f6;
            color: white;
        }
        
        /* 活动卡片通用样式 */
        .event-card {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0,0,0,0.02);
            transition: all 0.3s ease;
            margin-bottom: 1.5rem;
        }
        
        .event-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.05);
        }
        
        .event-category {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 500;
            margin-bottom: 0.5rem;
        }
        
        .event-title {
            font-weight: 600;
            font-size: 1.1rem;
            color: #1e293b;
            margin-bottom: 0.5rem;
            transition: color 0.2s;
        }
        
        .event-card:hover .event-title {
            color: #3b82f6;
        }
        
        .event-meta {
            font-size: 0.85rem;
            color: #64748b;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.25rem;
        }
        
        .event-stats {
            display: flex;
            align-items: center;
            gap: 1rem;
            font-size: 0.8rem;
            color: #64748b;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .event-host {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.85rem;
            color: #64748b;
        }
        
        .host-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        /* 图片样式 */
        .event-image {
            width: 100%;
            height: 180px;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .event-card:hover .event-image {
            transform: scale(1.03);
        }
        
        .image-container {
            overflow: hidden;
            position: relative;
        }
        
        .multiple-images {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            gap: 3px;
            height: 180px;
        }
        
        .multiple-images img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .no-image {
            width: 100%;
            height: 180px;
            background-color: #f1f5f9;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #94a3b8;
        }
        
        .image-count {
            position: absolute;
            bottom: 8px;
            right: 8px;
            background-color: rgba(0,0,0,0.6);
            color: white;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 0.75rem;
        }
        
        /* 卡片内容区 */
        .event-content {
            padding: 1rem;
        }
        
        /* 活动操作按钮 */
        .event-actions {
            display: flex;
            justify-content: space-between;
            margin-top: 0.75rem;
            padding-top: 0.75rem;
            border-top: 1px solid #f1f5f9;
        }
        
        .action-btn {
            background: none;
            border: none;
            color: #64748b;
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 4px 8px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .action-btn:hover {
            background-color: #f1f5f9;
            color: #3b82f6;
        }
        
        .action-btn.liked {
            color: #ef4444;
        }
        
        .action-btn.saved {
            color: #f59e0b;
        }
        
        /* 布局1: 大图卡片 */
        .layout-1 .event-card {
            display: flex;
            flex-direction: column;
        }
        
        .layout-1 .image-container {
            height: 220px;
        }
        
        .layout-1 .event-image {
            height: 100%;
        }
        
        /* 布局2: 图文并排卡片 */
        @media (min-width: 768px) {
            .layout-2 .event-card {
                display: flex;
                height: 200px;
            }
            
            .layout-2 .image-container {
                flex: 0 0 35%;
                height: 100%;
            }
            
            .layout-2 .event-image {
                height: 100%;
            }
            
            .layout-2 .event-content {
                flex: 1;
                display: flex;
                flex-direction: column;
            }
            
            .layout-2 .event-actions {
                margin-top: auto;
            }
        }
        
        /* 布局3: 小卡片网格 */
        .layout-3 {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
        }
        
        .layout-3 .event-card {
            margin-bottom: 0;
        }
        
        .layout-3 .image-container {
            height: 160px;
        }
        
        .layout-3 .event-image {
            height: 100%;
        }
        
        /* 布局4: 突出内容卡片 */
        .layout-4 .event-card {
            border-left: 4px solid #3b82f6;
        }
        
        .layout-4 .image-container {
            height: 140px;
        }
        
        .layout-4 .event-image {
            height: 100%;
        }
        
        /* 分类颜色 */
        .cat-music { background-color: #e0f2fe; color: #0369a1; }
        .cat-food { background-color: #fef3c7; color: #92400e; }
        .cat-movie { background-color: #e0e7ff; color: #4338ca; }
        .cat-sport { background-color: #dcfce7; color: #15803d; }
        .cat-art { background-color: #fee2e2; color: #b91c1c; }
        .cat-travel { background-color: #f3e8ff; color: #7c3aed; }
        .cat-study { background-color: #d1fae5; color: #065f46; }
        
        /* 区域标题 */
        .section-title {
            font-weight: 600;
            font-size: 1.3rem;
            color: #1e293b;
            margin: 2.5rem 0 1.5rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .section-title::after {
            content: '';
            flex: 1;
            height: 1px;
            background-color: #e2e8f0;
        }
        
        /* 加载更多按钮 */
        .load-more {
            display: block;
            margin: 2rem auto;
            padding: 0.75rem 2rem;
            background-color: white;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-weight: 500;
            color: #3b82f6;
            transition: all 0.3s;
        }
        
        .load-more:hover {
            background-color: #f8fafc;
            border-color: #cbd5e1;
            transform: translateY(-2px);
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .page-title {
                font-size: 1.5rem;
            }
            
            .event-actions {
                flex-wrap: wrap;
                gap: 0.5rem;
            }
            
            .action-btn {
                flex: 1;
                justify-content: center;
            }
        }
        
        @media (max-width: 576px) {
            .layout-3 {
                grid-template-columns: 1fr;
            }
            
            .categories {
                gap: 0.5rem;
            }
            
            .category-item {
                padding: 0.4rem 0.8rem;
                font-size: 0.85rem;
            }
        }
        
        /* 动画效果 */
        .fade-in {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a href="#" class="logo">
                <i class="fas fa-heart"></i>
                <span>心动社交</span>
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
                <i class="fas fa-bars"></i>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarContent">
                <div class="search-bar mx-auto my-3 my-lg-0">
                    <i class="fas fa-search"></i>
                    <input type="text" class="form-control rounded-full" placeholder="搜索活动、兴趣或人...">
                </div>
                
                <ul class="navbar-nav ms-auto gap-1">
                    <li class="nav-item">
                        <a href="#" class="nav-link">首页</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link active">发现活动</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">附近的人</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">消息</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="btn btn-primary">
                            <i class="fas fa-plus me-1"></i> 发起活动
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <!-- 主内容区 -->
    <div class="container main-container">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">发现精彩活动</h1>
            <p class="page-description">探索周围有趣的活动，结识志同道合的朋友</p>
        </div>
        
        <!-- 分类筛选 -->
        <div class="categories">
            <div class="category-item active">全部活动</div>
            <div class="category-item">音乐演出</div>
            <div class="category-item">美食聚会</div>
            <div class="category-item">电影沙龙</div>
            <div class="category-item">运动健身</div>
            <div class="category-item">艺术展览</div>
            <div class="category-item">户外旅行</div>
            <div class="category-item">学习交流</div>
        </div>
        
        <!-- 热门推荐区 - 大图布局 -->
        <h2 class="section-title">
            <i class="fas fa-fire-alt text-orange-500"></i> 热门推荐
        </h2>
        
        <div class="layout-1">
            <!-- 活动1: 带单张图片 -->
            <div class="event-card fade-in">
                <div class="image-container">
                    <img src="https://picsum.photos/1200/600?random=1" alt="城市音乐节现场" class="event-image">
                </div>
                <div class="event-content">
                    <span class="event-category cat-music">音乐演出</span>
                    <h3 class="event-title">2023城市音乐节，感受夏日激情</h3>
                    <div class="event-meta">
                        <i class="far fa-calendar-alt"></i>
                        <span>2023年7月15日 18:00</span>
                    </div>
                    <div class="event-meta">
                        <i class="far fa-map-marker-alt"></i>
                        <span>中央公园音乐广场</span>
                    </div>
                    <div class="event-host">
                        <img src="https://picsum.photos/200/200?random=101" alt="王音乐的头像" class="host-avatar">
                        <span>发起人: 王音乐</span>
                    </div>
                    <div class="event-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>1.2k</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span>86</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-user"></i>
                            <span>328人参加</span>
                        </div>
                    </div>
                    <div class="event-actions">
                        <button class="action-btn">
                            <i class="far fa-heart"></i>
                            <span>245</span>
                        </button>
                        <button class="action-btn">
                            <i class="far fa-bookmark"></i>
                            <span>收藏</span>
                        </button>
                        <button class="action-btn">
                            <i class="far fa-share-alt"></i>
                            <span>分享</span>
                        </button>
                        <button class="action-btn btn-primary">
                            <i class="far fa-plus-circle"></i>
                            <span>参加</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 最新活动区 - 图文并排布局 -->
        <h2 class="section-title">
            <i class="fas fa-clock text-blue-500"></i> 最新发布
        </h2>
        
        <div class="layout-2">
            <!-- 活动2: 带多张图片 -->
            <div class="event-card fade-in">
                <div class="image-container">
                    <div class="multiple-images">
                        <img src="https://picsum.photos/600/400?random=10" alt="美食分享会现场" data-img="https://picsum.photos/600/400?random=10">
                        <img src="https://picsum.photos/600/400?random=11" alt="精美甜点" data-img="https://picsum.photos/600/400?random=11">
                        <img src="https://picsum.photos/600/400?random=12" alt="烹饪过程" data-img="https://picsum.photos/600/400?random=12">
                        <img src="https://picsum.photos/600/400?random=13" alt="食材展示" data-img="https://picsum.photos/600/400?random=13">
                    </div>
                    <div class="image-count">+8</div>
                </div>
                <div class="event-content">
                    <span class="event-category cat-food">美食聚会</span>
                    <h3 class="event-title">夏日甜点分享会，一起制作马卡龙</h3>
                    <div class="event-meta">
                        <i class="far fa-calendar-alt"></i>
                        <span>2023年7月16日 14:00</span>
                    </div>
                    <div class="event-meta">
                        <i class="far fa-map-marker-alt"></i>
                        <span>甜蜜时光烘焙工作室</span>
                    </div>
                    <div class="event-host">
                        <img src="https://picsum.photos/200/200?random=102" alt="李甜点的头像" class="host-avatar">
                        <span>发起人: 李甜点</span>
                    </div>
                    <div class="event-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>856</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span>42</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-user"></i>
                            <span>24人参加</span>
                        </div>
                    </div>
                    <div class="event-actions">
                        <button class="action-btn">
                            <i class="far fa-heart"></i>
                            <span>156</span>
                        </button>
                        <button class="action-btn">
                            <i class="far fa-bookmark"></i>
                            <span>收藏</span>
                        </button>
                        <button class="action-btn btn-primary">
                            <i class="far fa-plus-circle"></i>
                            <span>参加</span>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 活动3: 无图片 -->
            <div class="event-card fade-in">
                <div class="image-container">
                    <div class="no-image">
                        <i class="fas fa-film fa-3x"></i>
                    </div>
                </div>
                <div class="event-content">
                    <span class="event-category cat-movie">电影沙龙</span>
                    <h3 class="event-title">经典黑白电影欣赏会：《罗马假日》</h3>
                    <div class="event-meta">
                        <i class="far fa-calendar-alt"></i>
                        <span>2023年7月14日 19:30</span>
                    </div>
                    <div class="event-meta">
                        <i class="far fa-map-marker-alt"></i>
                        <span>光影咖啡馆</span>
                    </div>
                    <div class="event-host">
                        <img src="https://picsum.photos/200/200?random=103" alt="张电影的头像" class="host-avatar">
                        <span>发起人: 张电影</span>
                    </div>
                    <div class="event-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>423</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span>28</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-user"></i>
                            <span>18人参加</span>
                        </div>
                    </div>
                    <div class="event-actions">
                        <button class="action-btn liked">
                            <i class="fas fa-heart"></i>
                            <span>96</span>
                        </button>
                        <button class="action-btn saved">
                            <i class="fas fa-bookmark"></i>
                            <span>已收藏</span>
                        </button>
                        <button class="action-btn btn-primary">
                            <i class="far fa-plus-circle"></i>
                            <span>参加</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 附近活动区 - 网格布局 -->
        <h2 class="section-title">
            <i class="fas fa-map-marker text-red-500"></i> 附近活动
        </h2>
        
        <div class="layout-3">
            <!-- 活动4 -->
            <div class="event-card fade-in">
                <div class="image-container">
                    <img src="https://picsum.photos/600/400?random=20" alt="城市夜跑活动" class="event-image">
                </div>
                <div class="event-content">
                    <span class="event-category cat-sport">运动健身</span>
                    <h3 class="event-title">城市夜跑，健康生活从脚下开始</h3>
                    <div class="event-meta">
                        <i class="far fa-calendar-alt"></i>
                        <span>每晚 19:00</span>
                    </div>
                    <div class="event-meta">
                        <i class="far fa-map-marker-alt"></i>
                        <span>滨江公园 (1.2km)</span>
                    </div>
                    <div class="event-host">
                        <img src="https://picsum.photos/200/200?random=104" alt="刘运动的头像" class="host-avatar">
                        <span>刘运动</span>
                    </div>
                    <div class="event-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>632</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-user"></i>
                            <span>45人参加</span>
                        </div>
                    </div>
                    <div class="event-actions">
                        <button class="action-btn">
                            <i class="far fa-heart"></i>
                            <span>128</span>
                        </button>
                        <button class="action-btn">
                            <i class="far fa-bookmark"></i>
                            <span>收藏</span>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 活动5 -->
            <div class="event-card fade-in">
                <div class="image-container">
                    <img src="https://picsum.photos/600/400?random=21" alt="油画体验课" class="event-image">
                </div>
                <div class="event-content">
                    <span class="event-category cat-art">艺术展览</span>
                    <h3 class="event-title">零基础油画体验课，释放你的创造力</h3>
                    <div class="event-meta">
                        <i class="far fa-calendar-alt"></i>
                        <span>7月22日 10:00</span>
                    </div>
                    <div class="event-meta">
                        <i class="far fa-map-marker-alt"></i>
                        <span>色彩空间画室 (2.5km)</span>
                    </div>
                    <div class="event-host">
                        <img src="https://picsum.photos/200/200?random=105" alt="陈艺术的头像" class="host-avatar">
                        <span>陈艺术</span>
                    </div>
                    <div class="event-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>517</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-user"></i>
                            <span>16人参加</span>
                        </div>
                    </div>
                    <div class="event-actions">
                        <button class="action-btn">
                            <i class="far fa-heart"></i>
                            <span>93</span>
                        </button>
                        <button class="action-btn">
                            <i class="far fa-bookmark"></i>
                            <span>收藏</span>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 活动6 -->
            <div class="event-card fade-in">
                <div class="image-container">
                    <div class="no-image">
                        <i class="fas fa-hiking fa-3x"></i>
                    </div>
                </div>
                <div class="event-content">
                    <span class="event-category cat-travel">户外旅行</span>
                    <h3 class="event-title">周末登山活动，征服城市周边山峰</h3>
                    <div class="event-meta">
                        <i class="far fa-calendar-alt"></i>
                        <span>7月23日 6:30</span>
                    </div>
                    <div class="event-meta">
                        <i class="far fa-map-marker-alt"></i>
                        <span>青峰山 (35km)</span>
                    </div>
                    <div class="event-host">
                        <img src="https://picsum.photos/200/200?random=106" alt="赵旅行的头像" class="host-avatar">
                        <span>赵旅行</span>
                    </div>
                    <div class="event-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>785</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-user"></i>
                            <span>32人参加</span>
                        </div>
                    </div>
                    <div class="event-actions">
                        <button class="action-btn liked">
                            <i class="fas fa-heart"></i>
                            <span>215</span>
                        </button>
                        <button class="action-btn saved">
                            <i class="fas fa-bookmark"></i>
                            <span>已收藏</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 兴趣推荐区 - 突出内容布局 -->
        <h2 class="section-title">
            <i class="fas fa-lightbulb text-yellow-500"></i> 为你推荐
        </h2>
        
        <div class="layout-4">
            <!-- 活动7: 带多张图片 -->
            <div class="event-card fade-in">
                <div class="image-container">
                    <div class="multiple-images">
                        <img src="https://picsum.photos/600/400?random=30" alt="读书会现场" data-img="https://picsum.photos/600/400?random=30">
                        <img src="https://picsum.photos/600/400?random=31" alt="书籍展示" data-img="https://picsum.photos/600/400?random=31">
                    </div>
                    <div class="image-count">+3</div>
                </div>
                <div class="event-content">
                    <span class="event-category cat-study">学习交流</span>
                    <h3 class="event-title">每月读书会：分享你最近读的好书</h3>
                    <div class="event-meta">
                        <i class="far fa-calendar-alt"></i>
                        <span>7月30日 15:00</span>
                    </div>
                    <div class="event-meta">
                        <i class="far fa-map-marker-alt"></i>
                        <span>知味书店</span>
                    </div>
                    <div class="event-host">
                        <img src="https://picsum.photos/200/200?random=107" alt="孙读书的头像" class="host-avatar">
                        <span>发起人: 孙读书</span>
                    </div>
                    <div class="event-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>328</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span>19</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-user"></i>
                            <span>12人参加</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-heart"></i>
                            <span>76</span>
                        </div>
                    </div>
                    <div class="event-actions">
                        <button class="action-btn">
                            <i class="far fa-bookmark"></i>
                            <span>收藏</span>
                        </button>
                        <button class="action-btn btn-primary">
                            <i class="far fa-plus-circle"></i>
                            <span>参加</span>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 活动8: 带单张图片 -->
            <div class="event-card fade-in">
                <div class="image-container">
                    <img src="https://picsum.photos/600/400?random=32" alt="爵士音乐会" class="event-image">
                </div>
                <div class="event-content">
                    <span class="event-category cat-music">音乐演出</span>
                    <h3 class="event-title">爵士之夜，蓝调音乐现场演出</h3>
                    <div class="event-meta">
                        <i class="far fa-calendar-alt"></i>
                        <span>每周五 21:00</span>
                    </div>
                    <div class="event-meta">
                        <i class="far fa-map-marker-alt"></i>
                        <span>蓝调酒吧</span>
                    </div>
                    <div class="event-host">
                        <img src="https://picsum.photos/200/200?random=108" alt="周爵士的头像" class="host-avatar">
                        <span>发起人: 周爵士</span>
                    </div>
                    <div class="event-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>956</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span>53</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-user"></i>
                            <span>48人参加</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-heart"></i>
                            <span>207</span>
                        </div>
                    </div>
                    <div class="event-actions">
                        <button class="action-btn">
                            <i class="far fa-bookmark"></i>
                            <span>收藏</span>
                        </button>
                        <button class="action-btn btn-primary">
                            <i class="far fa-plus-circle"></i>
                            <span>参加</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 加载更多按钮 -->
        <button class="load-more">
            <i class="fas fa-spinner fa-spin me-2" style="display: none;"></i>
            加载更多活动
        </button>
    </div>
    
    <!-- 页脚 -->
    <footer class="bg-white py-5 border-top">
        <div class="container">
            <div class="row">
                <div class="col-md-6 mb-4">
                    <div class="logo mb-3">
                        <i class="fas fa-heart"></i>
                        <span>心动社交</span>
                    </div>
                    <p class="text-muted mb-0" style="max-width: 400px;">
                        连接有趣的灵魂，发现精彩的活动。在这里，每一次相遇都是美好的开始。
                    </p>
                </div>
                
                <div class="col-md-3 mb-4">
                    <h5 class="font-weight-medium mb-3">快速链接</h5>
                    <ul class="list-unstyled">
                        <li class="mb-2"><a href="#" class="text-muted">首页</a></li>
                        <li class="mb-2"><a href="#" class="text-muted">活动推荐</a></li>
                        <li class="mb-2"><a href="#" class="text-muted">附近活动</a></li>
                        <li class="mb-2"><a href="#" class="text-muted">帮助中心</a></li>
                    </ul>
                </div>
                
                <div class="col-md-3">
                    <h5 class="font-weight-medium mb-3">联系我们</h5>
                    <ul class="list-unstyled">
                        <li class="mb-2 text-muted"><i class="fas fa-envelope me-2"></i>contact@xindong.com</li>
                        <li class="mb-2 text-muted"><i class="fas fa-phone me-2"></i>400-123-4567</li>
                    </ul>
                    <div class="mt-3">
                        <a href="#" class="text-muted me-3"><i class="fab fa-weibo"></i></a>
                        <a href="#" class="text-muted me-3"><i class="fab fa-wechat"></i></a>
                        <a href="#" class="text-muted"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
            <div class="text-center mt-5 pt-3 border-top">
                <p class="text-muted mb-0">&copy; 2023 心动社交 - 让每次活动都充满惊喜</p>
            </div>
        </div>
    </footer>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 滚动渐入动画
            const fadeElements = document.querySelectorAll('.fade-in');
            
            const observer = new IntersectionObserver((entries) => {
                entries.forEach((entry, index) => {
                    if (entry.isIntersecting) {
                        setTimeout(() => {
                            entry.target.style.opacity = '1';
                            entry.target.style.transform = 'translateY(0)';
                        }, index * 100);
                        observer.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.1 });
            
            fadeElements.forEach(el => observer.observe(el));
            
            // 分类筛选功能
            const categoryItems = document.querySelectorAll('.category-item');
            categoryItems.forEach(item => {
                item.addEventListener('click', function() {
                    categoryItems.forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 这里可以添加筛选活动的逻辑
                    const category = this.textContent;
                    console.log('筛选类别: ' + category);
                });
            });
            
            // 点赞功能
            const likeButtons = document.querySelectorAll('.action-btn .fa-heart');
            likeButtons.forEach(btn => {
                btn.closest('.action-btn').addEventListener('click', function(e) {
                    e.stopPropagation();
                    const icon = this.querySelector('i');
                    const countSpan = this.querySelector('span');
                    
                    if (icon.classList.contains('far')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.classList.add('liked');
                        countSpan.textContent = (parseInt(countSpan.textContent) + 1).toString();
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.classList.remove('liked');
                        countSpan.textContent = (parseInt(countSpan.textContent) - 1).toString();
                    }
                });
            });
            
            // 收藏功能
            const saveButtons = document.querySelectorAll('.action-btn .fa-bookmark');
            saveButtons.forEach(btn => {
                btn.closest('.action-btn').addEventListener('click', function(e) {
                    e.stopPropagation();
                    const icon = this.querySelector('i');
                    const textSpan = this.querySelector('span');
                    
                    if (icon.classList.contains('far')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.classList.add('saved');
                        textSpan.textContent = '已收藏';
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.classList.remove('saved');
                        textSpan.textContent = '收藏';
                    }
                });
            });
            
            // 分享功能
            const shareButtons = document.querySelectorAll('.action-btn .fa-share-alt');
            shareButtons.forEach(btn => {
                btn.closest('.action-btn').addEventListener('click', function(e) {
                    e.stopPropagation();
                    alert('分享功能：可以分享到微信、微博等平台');
                });
            });
            
            // 参加活动功能
            const joinButtons = document.querySelectorAll('.action-btn.btn-primary');
            joinButtons.forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const eventTitle = this.closest('.event-card').querySelector('.event-title').textContent;
                    
                    if (this.textContent.includes('参加')) {
                        if (confirm(`确定要参加"${eventTitle}"吗？`)) {
                            this.innerHTML = '<i class="fas fa-check"></i><span>已参加</span>';
                            
                            // 更新参加人数
                            const participantStat = this.closest('.event-card').querySelector('.stat-item .fa-user').closest('.stat-item span');
                            if (participantStat) {
                                const currentCount = parseInt(participantStat.textContent);
                                participantStat.textContent = `${currentCount + 1}人参加`;
                            }
                        }
                    } else {
                        if (confirm(`确定要取消参加"${eventTitle}"吗？`)) {
                            this.innerHTML = '<i class="far fa-plus-circle"></i><span>参加</span>';
                            
                            // 更新参加人数
                            const participantStat = this.closest('.event-card').querySelector('.stat-item .fa-user').closest('.stat-item span');
                            if (participantStat) {
                                const currentCount = parseInt(participantStat.textContent);
                                participantStat.textContent = `${currentCount - 1}人参加`;
                            }
                        }
                    }
                });
            });
            
            // 加载更多功能
            const loadMoreBtn = document.querySelector('.load-more');
            loadMoreBtn.addEventListener('click', function() {
                const spinner = this.querySelector('.fa-spinner');
                spinner.style.display = 'inline-block';
                this.disabled = true;
                
                // 模拟加载延迟
                setTimeout(() => {
                    spinner.style.display = 'none';
                    this.disabled = false;
                    alert('已加载全部活动');
                }, 1500);
            });
            
            // 多图预览功能
            const multipleImages = document.querySelectorAll('.multiple-images img');
            multipleImages.forEach(img => {
                img.addEventListener('click', function() {
                    const images = Array.from(this.parentElement.querySelectorAll('img')).map(i => i.dataset.img);
                    const currentIndex = images.indexOf(this.dataset.img);
                    
                    // 这里可以实现图片预览模态框
                    alert(`图片预览功能：共${images.length}张图片，当前查看第${currentIndex + 1}张`);
                });
            });
        });
    </script>
</body>
</html>

